<template>
  <div>
    <breadc-rumb>
      <div class="directory" slot="breadc-button">
        <product-directory backColor="#e7e7e7" @onClick="handleCategoriesClick"
          :productList="productCategoriesList"></product-directory>
      </div>
    </breadc-rumb>
    <div class="container">
      <el-skeleton :loading="loading" animated>
        <template slot="template">
          <div class="product-main">
            <div class="product-image">
              <el-skeleton-item variant="image" style="width: 480px; height: 480px;" />
              <div class="thumbnail">
                <div class="thumbnail-item">
                  <el-skeleton-item variant="image" style="width: 100%; height: 100%;" />
                </div>
              </div>
            </div>
            <div class="product-details">
              <div class="product-name">
                <h1><el-skeleton-item variant="h1" style="width: 100%;" /></h1>
              </div>
              <div class="product-directory">
                <el-skeleton-item variant="h3" style="width: 100px;" />
              </div>
              <div class="product-shortDescription">
                <el-skeleton-item variant="h3" style="width: 100%;" />
                <el-skeleton-item variant="h3" style="width: 80%;" />
                <el-skeleton-item variant="h3" style="width: 50%;" />
              </div>
              <div class="product-price">
                <span class="price"><el-skeleton-item variant="h3" style="width: 120px;" /></span>
              </div>
            </div>
          </div>
          <div class="product-tabs">
            <div class="product-tabs-item">
              产品详情
            </div>
          </div>
          <div class="editor-content-view">
            <el-skeleton-item variant="h3" style="width: 100%;" />
            <el-skeleton-item variant="h3" style="width: 100%;" />
            <el-skeleton-item variant="h3" style="width: 100%;" />
            <el-skeleton-item variant="h3" style="width: 80%;" />
            <el-skeleton-item variant="h3" style="width: 60%;" />
          </div>
        </template>
        <template v-show="!loading">
          <div class="product-main">
            <div class="product-image">
              <s-img-zoom :width="480" :height="480" :minIMGsrc="product.mainImageUrl" :scale="3"></s-img-zoom>
              <div class="thumbnail">
                <div @mouseenter="handleThumbnailMouseEnter(item)"
                  :class="[product.mainImageUrl == item ? 'thumbnail-activate' : '', 'thumbnail-item']"
                  v-for="(item, index) in detailImageUrls" :key="index">
                  <img :src="item">
                </div>
              </div>
            </div>
            <div class="product-details">
              <div class="product-name">
                <h1>{{ product.productName }}</h1>
              </div>
              <div class="product-directory">
                {{ $t('product.productDetails.category') }}<a
                  :href="'/Product/List?categoriesId=' + product.categoryId">{{
            $t(categoriesName) }}</a>
              </div>
              <div class="product-shortDescription">{{ product.shortDescription }}</div>
              <div v-if="product.showPrice" class="product-price">
                <label>{{ $t('product.productDetails.priceText') }}</label>
                <span class="currencies">{{ product.currencies }}</span>
                <span class="price">{{ product.price.toFixed(2) | thousandSeparator }}</span>
                <span class="unit" v-if="product.unit != null && product.unit != ''">/&nbsp;{{ product.unit }}</span>
              </div>
              <div v-else class="product-btns">
                <buttom-url class="inquiry" :src="'/'">{{ $t('product.productDetails.inquiry') }}</buttom-url>
              </div>
            </div>
          </div>
          <div class="product-tabs">
            <div class="product-tabs-item">
              产品详情
            </div>
          </div>
          <div class="editor-content-view" v-html="product.longDescription"></div>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script>
import BreadcRumb from '@/components/BreadcRumb.vue';
import ProductDirectory from '@/components/Product/ProductDirectory.vue';
import ButtomUrl from "@/components/Button/ButtomUrl";
import * as productApi from '@/api/web/productApi';
import SImgZoom from '@/components/SImgZoom.vue';
import Enumerable from 'linq';

export default {
  components: {
    BreadcRumb,
    ProductDirectory,
    ButtomUrl,
    SImgZoom
  },
  data() {
    return {
      id: null,
      productCategoriesList: [],
      product: {
        mainImageUrl: '',
        detailImageUrls: [],
        productName: '',
        categoryId: 0,
        shortDescription: "",
        showPrice: false,
        currencies: '',
        price: 0,
        longDescription: ''
      },
      detailImageUrls: [],
      loading: true,
    }
  },
  methods: {
    getAllProductCategorieList() {
      productApi.getAllProductCategorieList()
        .then(res => {
          if (res.code == 200) {
            this.productCategoriesList = res.data;
            if (this.id != null) {
              this.getProductSingle();
            }
          }
        })
    },
    handleCategoriesClick(item) {
      location.href = "/Product?categoriesId=" + item.id;
    },
    getProductSingle() {
      this.loading = true;
      productApi.getProductSingle(this.id)
        .then(res => {
          if (res.code == 200) {
            this.product = res.data;
            if (this.product.detailImageUrls != null && this.product.detailImageUrls != '') {
              this.detailImageUrls = JSON.parse(this.product.detailImageUrls);
            }
            //置面包屑标题
            var categories = Enumerable.from(this.productCategoriesList)
              .where(p => p.id == this.product.categoryId)
              .firstOrDefault();
            if (categories != null) {
              this.$router.currentRoute.meta.bread = [
                { path: "/Product", name: "product.title" },
                { path: "/Product?categoriesId=" + categories.id, name: categories.categoryName },
                { path: "/product/ProductDetails?id=" + this.id, name: this.product.productName },
              ];
            }
            this.loading = false;
          }
          else if (res.code == 500) {
            this.$alert(res.exception, '错误', {
              confirmButtonText: '确定',
              type: 'error',
              callback: action => {
                window.close();
              }
            });
          }
        })
    },
    handleThumbnailMouseEnter(item) {
      this.product.mainImageUrl = item;
    }
  },
  filters: {
    thousandSeparator(value) {
      if (!value) return ''
      return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  },
  computed: {
    categoriesName() {
      if (this.product != null) {
        var categories = Enumerable.from(this.productCategoriesList)
          .where(p => p.id == this.product.categoryId)
          .firstOrDefault();
        if (categories == null) {
          return "product.productDetails.unknownCategories";
        }
        return categories.categoryName;
      }
      return "product.productDetails.unknownCategories";
    }
  },
  mounted() {
    this.getAllProductCategorieList();
    if (this.$route.query.id != null) {
      this.id = parseInt(this.$route.query.id);
    }
  }
}
</script>

<style scoped>
.product-tabs {
  background: #f1f1f1;
  margin-top: 10px;
  display: flex;
  border: 1px solid #DCDFE6;
}


.product-tabs .product-tabs-item {
  width: 200px;
  background: #fff;
  text-align: center;
  padding: 20px 0px;
  border-right: 1px solid #E4E7ED;
  font-size: 14px;
  color: #806e22;
}

.product-main {
  display: flex;
  padding: 30px 0px;
  /* border-bottom: 2px solid #E4E7ED; */
}

.product-main .product-image {
  width: 480px;
}

.thumbnail {
  display: flex;
  width: 100%;
  margin-top: 20px;
}

.thumbnail-activate {
  border: 1px solid #806e22 !important;
}

.thumbnail .thumbnail-item {
  width: calc(480px / 7);
  height: calc(480px / 7);
  border: 1px solid #E4E7ED;
  cursor: pointer;
  background: #806e22;
}

.thumbnail-item+.thumbnail-item {
  margin-left: 5px;
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
}

.product-details {
  flex: 1;
  padding: 0px 50px;
  box-sizing: border-box;
}

.product-details .product-name {}

.product-details .product-name h1 {
  margin: 0px;
  font-weight: bold;
  color: #303133;
  padding: 0px 10px;
}

.product-directory {
  font-size: 14px;
  color: #606266;
  margin-top: 20px;
  padding: 0px 10px;
}

.product-directory a {
  font-size: 16px;
  margin-left: 10px;
}

.product-shortDescription {
  font-size: 14px;
  color: #909399;
  padding: 20px 10px;
  border-bottom: 1px solid #EBEEF5;
  white-space: pre-wrap;
}

.product-price {
  padding: 20px 10px;
  background: #f9f9f9;
  margin-top: 10px;
}

.product-price label {
  font-size: 14px;
  color: #606266;
  margin-right: 10px;
}

.product-price .currencies {
  font-size: 20px;
  color: #806e22;
}

.product-price .unit {
  font-size: 20px;
  color: #806e22;
}

.product-price .price {
  font-size: 30px;
  color: #806e22;
  font-weight: bold;
}

.product-btns {
  padding: 20px 0px;
}

.inquiry {
  min-width: 120px;
}

.container {
  padding-bottom: 25px;
}
</style>